<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 90%;
			margin: 0 auto;
			border: 1px solid #aaa;
			position: relative;
		}
		.container img {
			position: absolute;
			width: 220px;
			transition: all .5s;
		}
	</style>
</head>
<body>
	<!-- 将图片填放的最大容器 -->
	<div class="container">
		<!-- <img src="" alt="">... -->
	</div>
	<script type="text/javascript">
		var imgWidth = 220;//每张图片的宽度
		var container = document.querySelector(".container");
		// 1.封装--计算出容器能容下多少列的方法 当窗口大小更新 我们重新计算列数
		function cal() {
			var containerWidth = container.clientWidth;//获取容器内的宽度
			// 列数 = 容器宽 / 图片宽度 
			var columns = Math.floor(containerWidth / imgWidth);//得到最大列数 同时能够得到剩余的缝隙最大值
			// 还需要计算缝隙 总缝隙 = 容器宽 - (图片宽 * 列数)
			var leftSpace = containerWidth - (columns * imgWidth);//剩余的空间
			var spaceNumber = columns + 1;//缝隙数 永远比列数多一
			var space = leftSpace / spaceNumber;//计算出每一个缝隙的距离
			return {
				columns: columns,
				space: space
			}
		}
		console.log(cal());

		// 封装--寻找数组列中的最小值的方法
		function getMax(arr) {
			var max = arr[0];//假设第一项最大
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] > max) {
					max = arr[i]
				}
			}
			return max;
		}
		// 封装--寻找数组列中的最小值的方法
		function getMin(arr) {
			var min = arr[0];//假设第一项最小
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] < min) {
					min = arr[i]
				}
			}
			return min;
		}

		// 2.封装--计算每一张图片的位置的方法 -- 我们需要寻找数组列中的最小值
		function setPosition() {
			// 在设置图片位置之前 我们首先要知道有多少列
			var info = cal();//通过该方法，就能够得到列数和缝隙
			// 我们接下来要创建数组 数组里面保存每一列的高度
			var arr = new Array(info.columns);
			arr.fill(info.space);//数组里面的每一项填充为0进去

			// 至此，我们的准备工作基本完成
			// 接下来需要计算一张张图片的top 和 left
			for (var i = 0; i < container.children.length; i++) {
				var img = container.children[i];//获取当前图片
				var minTop = getMin(arr);
				img.style.top = minTop + "px";

				// 接下来最重要的事情是 改变当前列的高度
				// 首先要知道最小数值对应的数组列的下标
				var index = arr.indexOf(minTop);
				// 这一列的最新高度 = 图片高度 + 间隙的高度
				arr[index] += img.height + info.space;
				// 至此 整个top值可以确定 还需要算出每一列的left
				var left = (index + 1) * info.space + index * imgWidth;
				img.style.left = left + "px";
			}
			// 因为图片是绝对定位 脱标的 所以无法撑起父元素的高度
			var max = getMax(arr);
			container.style.height = max + "px";
		}

		// 创建图片 并将图片进行位置的设置
		function createImg() {
			container.innerHTML=""
			for (var i = 0; i < 40; i++) {
				getList("https://api.vvhan.com/api/wallpaper/pcGirl", {type: "json"}, function (data) {
					console.log(data)
					var img = document.createElement("img");
					img.src = data.url;
					img.style.width = imgWidth;
					container.appendChild(img); 

					// 当每张图片加载完成 调用设置位置的方法 重新排列
					img.onload = setPosition;
				})
				
			}
		}
		createImg()
		setInterval(createImg,25000)

		// 简易版函数防抖
		var timer = null;
		window.onresize = function () {
			// 该事件或频繁触发 也就是会频繁修改盒子的大小
			if (timer) {
				clearTimeout(timer)
			}
			timer = setTimeout (function () {
				setPosition()
			}, 500)
			
		}

		function getList(url, json, callback) {
			var str = "?";
			for (key in json) {
				str += key + "=" + json[key] + "&"
			}
			
			var xhr = new XMLHttpRequest();
			xhr.open("get", url + str);
			xhr.send()
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4) {
					var json = JSON.parse(xhr.responseText)
					console.log(json)
					callback(json)
				}
			}
		}
		
		
	</script>
</body>
</html>